<template>
  <div>
    <h1>Todo-list</h1>
    <TodoItem
      v-for="item in todoList"
      :key="item.id"
      :item="item"
      @removeTodo="removeTodo"
      @setStatus="setStatus"
      @setDoing="setDoing"
    />
  </div>
</template>

<script lang="ts">
import { IUseTodo, useTodo } from '@/hooks'
import { ITodo } from '@/types'
import { defineComponent, PropType } from 'vue'
import TodoItem from './TodoItem.vue'
export default defineComponent({
  name: 'TodoList',
  components: { TodoItem },
  props: {
    todoList: Array as PropType<ITodo[]>,
  },
  setup() {
    const { removeTodo, setStatus, setDoing }: IUseTodo = useTodo()
    return {
      removeTodo,
      setStatus,
      setDoing,
    }
  },
})
</script>

<style scoped>
</style>